<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/swiper-3.3.1.min.css">
    	<link rel="stylesheet" href="./css/animate.min.css">
    	<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		    	<!--第一屏開始-->
		        <div class="swiper-slide swiper_one">
		        	<img src="./images/1.jpg" alt=""class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.3s"/>
		        	<!--在需要运动的元素上面增加类名  ani，和其他的类似插件相同，Swiper Animate需要指定几个参数：
					swiper-animate-effect：切换效果，例如 fadeInUp 
					swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
					swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s-->
		        </div>
		        <!--第一屏結束-->
		        
		        <!--第二屏開始-->
		        <div class="swiper-slide swiper_two">
		        	<p>
		        		<img src="./images/1.gif"class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s"/>
		        	</p>
					<p>
		        		<img src="./images/2.gif"class="ani"swiper-animate-effect="slideInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"/>
					</p>
					<p>
		        		<img src="./images/3.gif"class="ani"swiper-animate-effect="slideInLeft" swiper-animate-duration="2s" swiper-animate-delay="1s"/>
					</p>
					<p>
		        		<img src="./images/4.gif"class="ani"swiper-animate-effect="slideInLeft" swiper-animate-duration="2s" swiper-animate-delay="1.5s"/>
					</p>
					<p>
		        		<img src="./images/8.gif" alt=""class="ani"swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2s"/>
					</p>
					<p>
		        		<img src="./images/7.gif" class="ani"swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s"/>
					</p>
		        </div>
		        <!--第二屏結束-->
		        
		        <!--第三屏开始-->
		        <div class="swiper-slide swiper_three">
		        	<p>
		        		<img src="./images/31.gif"class="ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="1s" swiper-animate-delay="0s"/>
		        	</p>
					<p>
		        		<img src="./images/32.gif"class="ani" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"/>
					</p>
					<p>
		        		<img src="./images/33.gif"class="ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s"/>
					</p>
		        </div>
		        <!--第三屏结束-->
		        
		        <!--第四屏开始-->
		        <div class="swiper-slide swiper_four">
		        	<p>
		        		<img src="./images/41.gif"class="ani" swiper-animate-effect="rubberBand" swiper-animate-duration="1s" swiper-animate-delay="0s"/>
		        	</p>
					<p>
		        		<img src="./images/42.gif"class="ani" swiper-animate-effect="tada" swiper-animate-duration="1s" swiper-animate-delay="0.5s"/>
					</p>
					<p>
		        		<img src="./images/43.gif"class="ani" swiper-animate-effect="bounce" swiper-animate-duration="1s" swiper-animate-delay="1s"style="height: 350px;"/>
					</p>
		        </div>
		        <!--第四屏结束-->
		        
		        <!--第五屏幕开始-->
		        <div class="swiper-slide swiper_five">
		        	<p style="margin-top: 180px;"class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">姓名：赵广伟</p>
		        	<p style="margin-top: 10px;"class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s">学历：本科</p>
		        	<p style="margin-top: 10px;"class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s">年龄：26</p>
		        	<p style="margin-top: 10px;"class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.5s">工作经验：1年</p>
		        	<p style="margin-top: 10px;"class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2s">程序：PHP</p>
		        </div>
		        
		    </div>
		    <!--向上滑动效果图片-->
		    <div class="roll_up">
				<img id="lock" src="./images/arrow.png" style="left: 192px;">
		    </div>
			<!--音乐图标-->
			<img id="music"src="./images/music.png"style="right: 30px;"/>
			<!--音符图片-->
			<img src="./images/music_fly.gif" id="music_fly"/>
			<!--音乐盒标签-->
			<audio src="./images/onway.mp3"loop="loop" autoplay="autoplay"id="music_audio"></audio>
		</div>
		<script src="./js/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var music = document.getElementById("music");
			var music_audio = document.getElementById("music_audio");
			//设置一个变量，用来判断音乐的暂停
			var musc = true;
			music.onclick = function(){
				if(musc){
					//音乐暂停
					music_audio.pause();
					//图片停止旋转
					music.style.animationPlayState = 'paused';
					//改变变量
					musc = false;
				}else{
					//音乐开启
					music_audio.play();
					//图片开始旋转
					music.style.animationPlayState = 'running';
					//改变变量
					musc = true;
				}
			}
			
			var mySwiper = new Swiper ('.swiper-container', {
				
			    direction: 'vertical',
			    loop: true,
			    
			    onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			}) 
			
		</script>
	</body>
</html>
